<template>
	<view>
		<template v-if="searchResult.length === 0">
			<view class="flex">
				<view class="font-md mx-2 py-2">搜索历史</view>
				<view class="font-sm ml-auto py-2" @click="clearSearchResult">清空搜索历史</view>	
			</view>
			<view class="flex flex-wrap">
				<view 
				class="font-sm rounded border my-1 mx-2 px-1" 
				v-for="(item,index) in list" 
				:key='index'
				hover-class="bg-light"
				@click="searchHistoryTab(item)"
				>
					{{item}}
				</view>
			</view>
		</template>
		<template v-else>
			<block v-for="(item,index) in searchResult" :key="index">
				<template v-if="type=='post'">
					<!-- 帖子 -->
					<CommonList :item="item" :index="index" />
				</template>
				<template v-else-if="type=='user'">
					<!-- 用户 -->
					<userList :item="item" :index="index" ></userList>
				</template>
				<template v-else>
					<!-- 话题 -->
					<topicList :item="item" :index="index" ></topicList>
				</template>
			</block>
			<!-- 上拉加载 -->
			<load-more :loadmore="loadmore"></load-more>
		</template>
	</view>
</template>

<script>
	let demo1 = [{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题1",
					titlepic:"/static/demo/datapic/11.jpg",
					support:{
						type:'support',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题2",
					titlepic:"",
					support:{
						type:'unsupport',
						support_count:2,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题3",
					titlepic:"",
					support:{
						type:'',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				}];
	let demo2 = [{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				},
				{
					cover:'/static/demo/topicpic/16.jpeg',
					title:'#话题名称#',
					desc:'话题描述',
					today_count:10,
					news_count:10
				}];
	let demo3 = [
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 1, // 女
			age: 25,
			isFollow: true
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
	];
	import CommonList from '@/components/common/common-list.vue';
	import userList from '@/components/users-list/users-list.vue';
	import topicList from '@/components/news/topicList.vue';
	export default {
		components:{CommonList,userList,topicList},
		data() {
			return {
				list:[],
				// 搜索栏数据
				searchText: '',
				// 搜索结果
				searchResult:[],
				// 搜索类型
				type: '',
				page:1,
				loadmore: '上拉加载更多'
			}
		},
		// 监听导航输入数据
		onNavigationBarSearchInputChanged(e) {
			this.searchText = e.text
		},
		// 监听导航栏按下事件
		onNavigationBarButtonTap(e) {
			// index=0代表是按的搜索
			if (e.index === 0) {
				this.searhEvent()
			}
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
			}
			let pageTitle = '帖子'
			switch (this.type){
				case 'post':
				pageTitle = '帖子'
					break;
				case 'topic':
				pageTitle = '话题'
					break;
				case 'user':
				pageTitle = '用户'
					break;
			}
			// 修改搜索占位
			// #ifdef APP-PLUS
			let currentWebview = this.$mp.page.$getAppWebview();
			let tn = currentWebview.getStyle().titleNView; 
			tn.searchInput.placeholder = '搜索'+pageTitle; 
			currentWebview.setStyle({
				titleNView: tn  
			})
			// #endif
			// 读取本地搜索历史
			let list = uni.getStorageSync('historySearchText') || []
			if (list) {
				this.list = JSON.parse(list)
			}
		},
		// 监听下拉刷新事件
		onPullDownRefresh() {
			this.getData(true, () => {
				// 关闭下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		// 上拉刷新
		onReachBottom() {
			if (this.loadmore !== '上拉加载更多') {
				return
			}
			this.loadmore = '加载中'
			this.getData(false)
		},
		methods:{
			// 点击搜索历史
			searchHistoryTab(text){
				this.searchText = text
				this.searhEvent()
			},
			// 点击搜索按钮
			searhEvent() {
				// 隐藏键盘
				uni.hideKeyboard()
				// 存储搜索历史
				let index = this.list.findIndex(v => v === this.searchText)
				if (index !== -1) {
					this.$U.__toFirst(this.list,index)
				} else {
					this.list.unshift(this.searchText)
				}
				uni.setStorageSync('historySearchText', JSON.stringify(this.list))
				// 获取搜索结果
				this.getData()
			},
			getData(isrefresh = true, callback = false) {
				uni.showLoading({
					title:'加载中...'
				})
				// 如果是刷新状态
				this.page = isrefresh ? 1 : (this.page + 1)
				this.$H.post('/search/' + this.type, {
					keyword: this.searchText,
					page: this.page
				}).then(res => {
					let list = []
					switch (this.type){
						case 'post':
						list = res.list.map(v => {
							// 目的是让后台的数据与之前的数据名称一致
							return this.$U.formatCommonList(v)
						})
							break;
						case 'topic':
						list = res.list.map(v => {
							// 目的是让后台的数据与之前的数据名称一致
							return {
									id:v.id,
									cover:v.titlepic,
									title:v.title,
									desc:v.desc,
									today_count:v.today_count,
									news_count:v.post_count
								}
						})
							break;
						case 'user':
						pageTitle = '用户'
							break;
					}
					this.searchResult = isrefresh ? [...list] : [...this.searchResult, ...list]
					// 数据小于10条 后面就没有数据了
					this.loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多'
					uni.hideLoading()
					if (typeof callback === 'function') {
						callback()
					}
				}).catch(err => {
					this.page--
					uni.hideLoading()
					if (typeof callback === 'function') {
						callback()
					}
				})
			},
			clearSearchResult() {
				uni.removeStorage({
				    key:'historySearchText',
				    success: uni.showToast({
				    	title:'清除成功',
						icon:'none'
				    })
				})
			}
		}
	}
</script>

<style>
</style>
